<template>
	<div class="process-steps">
		<div
			v-for="(item, index) in processList"
			:key="index"
			class="process-steps-item"
			:style="{width: index !== processList.length - 1 ? `calc(100% / ${processList.length - 1})` : 'auto'}"
		>
			<div class="process-steps-item-inner" :style="{borderColor: setColor(item).color}">
				<div>
					<div
						v-if="index !== processList.length - 1"
						class="line-box"
						:style="{borderColor: setColor(item).color, background: setColor(item).color}"
					></div>
					<div
						class="circle-state"
						:class="setColor(item).icon"
						:style="{color: setColor(item).color, borderColor: setColor(item).color}"
					></div>
				</div>
				<div :style="{color: setColor(item).color}">{{ item.processName }}</div>
				<!--<div :style="{color: setColor(item).color}">{{ item.processName }}({{ item.productOrderMachineList ? item.productOrderMachineList.length : 0 }})</div>-->
			</div>
		</div>
	</div>
</template>
<script>
    export default {
        props: {
            processList: {
                type: Array,
                default() {
                    return [];
                }
            },
            stateList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
            };
        },
        methods: {
            setColor(item) {
                const colorItem = this.stateList.find(x => x.id === item.status) || {};
                return {
                    color: colorItem.color
                };
            }
        }
    };
</script>
<style scoped lang="scss">
$circle_size: 16px;
.process-steps {
    display: flex;
    height: 42px;
    font-size: 13px;
    .process-steps-item {
        height: 100%;
        position: relative;
        padding: 0 2px;
        box-sizing: border-box;
        .process-steps-item-inner {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-direction: column;
            white-space: nowrap;
            .line-box {
                width: 100%;
                height: 2px;
                position: absolute;
                top: 7px;
                left: 0;
                z-index: 2;
            }
            .circle-state {
                width: $circle_size;
                height: $circle_size;
                border-radius: 50%;
                position: absolute;
                top: 0;left: 0;
                border: solid 1px #000;
                z-index: 2;
                background: #fff;
            }
        }
    }
}
</style>
